<script  setup>
import { reactive, ref, onMounted, watch } from 'vue';

const emit = defineEmits(['toFatherValue']);
const activeImg = ref('');
const activeIndex = ref(0);
const props = defineProps({
  modalInfo: {
    default: {
      show: false,
      data: [],
      index: 0,
    },
  },
});
watch(
  () => props.modalInfo.show,
  (newValue, oldValue) => {
    if (newValue) {
      props.modalInfo.index = +props.modalInfo.index;
      activeImg.value = props.modalInfo.data[props.modalInfo.index];
    }
  }
);
const toFatherValue = () => {
  emit('toFatherValue');

}
const prev = () => {
  if (props.modalInfo.index == 0) {
    props.modalInfo.index = props.modalInfo.data.length - 1;
  } else {
    props.modalInfo.index = props.modalInfo.index - 1;
  }
  activeImg.value = props.modalInfo.data[props.modalInfo.index];

}
const next = () => {
  if (props.modalInfo.index == props.modalInfo.data.length - 1) {
    props.modalInfo.index = 0;
  } else {
    props.modalInfo.index = props.modalInfo.index + 1;
  }
  activeImg.value = props.modalInfo.data[props.modalInfo.index];

}
</script>

<template>
  <div class="pop-model-init" v-if="props.modalInfo.show">
    <div class="model-box">
      <div class="title-1 ">{{activeImg.n}}</div>
      <div class="img-box">
        <img :src="activeImg.v" alt="" srcset="">
      </div>
      <div class="close-i flex-center-center" @click="toFatherValue">
        <el-icon size="25"><CircleClose /></el-icon>
      </div>
      <template v-if="props.modalInfo.data.length > 1">
        <div class="left-m flex flex-center-center" @click.stop="prev">
          <el-icon class="ico-l" size="25"><ArrowLeftBold /></el-icon>
        </div>
        <div class="right-m flex flex-center-center" @click.stop="next">
          <el-icon class="ico-l" size="25"><ArrowRightBold /></el-icon>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pop-model-init {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
  background-color: #000c;
}
.model-box {
  width: 1402px;
  height: 762px;
  background: url('../pic/img-bg.png') no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  .title-1 {
    position: absolute;
    left: 61px;
    top: 28px;
    font-size: 36px;
    line-height: 47px;
    color: #fff;
    font-family: 'font-you';
  }
  .close-i {
    position: absolute;
    top: 38px;
    right: 62px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    &:hover {
      opacity: .83;
    }
  }
  .img-box {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 1320px;
    height: 640px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .left-m,
  .right-m {
    position: absolute;
    left: 41px;
    bottom: 32px;
    width: 80px;
    height: 640px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.02) 100%);
    cursor: pointer;
    &:hover {
      :deep(.ico-l svg) {
        opacity: 0.8;
      }
    }
    :deep(.ico-l svg) {
      font-size: 60px !important;
      color: #fff;
      opacity: 0.4;
    }
  }
  .right-m {
    left: auto;
    right: 41px;
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.02) 100%);
  }
}
</style>
      